import React, { Component } from 'react'
import { Layout, Button, messages } from 'antd';
const { Content } = Layout;
const constraints = window.constraints = {
    audio: false,
    video: true
};
let videoTracks = {};
export default class P2_open_carema extends Component {
    constructor(props) {
        super(props);
    }
    openCarema = async (e) => {
        try {
            const stream = await navigator.mediaDevices.getUserMedia(constraints);
            console.log('handle Success');
            this.handleSuccess(stream);
        } catch (e) {
            this.handleError(e);
        }
    }
    handleSuccess = (stream) => {
        const video = this.refs['openCarema_Video'];
        videoTracks = stream.getVideoTracks();
        window.stream = stream;
        video.srcObject = stream;
    }
    handleError = (error) => {
        console.log('getUserMedia error:', error)
    }
    closeCarema = () => {
        const video = this.refs['openCarema_Video'];
        video.srcObject = null
        videoTracks[0].stop();

    }

    render() {
        return (
            <div>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 700,
                    }}
                >
                    <video ref="openCarema_Video" className="video" weight="1024" height="700" autoPlay playsInline></video>

                </Content>
                <Content className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 100,
                    }}>
                    <Button onClick={this.openCarema}>打开摄像头</Button>&nbsp;
                    <Button onClick={this.closeCarema}>关闭摄像头</Button>
                </Content>
            </div>
        )
    }
}
